<template>
  <div class="loginView LG-wh100 LG-bgimg">
    <div class="loginView-head">
      <div class="loginView-logo">
        <img src="@/assets/logo/loginLogo.png" alt="" />
      </div>
      <div class="loginView-lang">
        <el-dropdown class="LG-h100">
          <div class="langinfo LG-h100" style="cursor: pointer">
            <svg-icon name="guojihua" color="#fff" />
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :disabled="item.disable" :class="storeLayoutInfo.localeConfig === item.value && 'custom-active'" v-for="item in langTypeList" :key="item.value" @click="switchLang(item.value)">
                {{ $t(`LG.baseModel.${item.value}`) }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <div class="loginView-box LG-wh100">
      <div class="box LG-wh100 animate__animated animate__fadeInRight">
        <div class="title">{{ $t('LG.baseModel.accountPasswordLogin') }}</div>
        <el-form size="large" class="login-content-form" :model="state.ruleForm" :rules="state.rules" ref="formRef">
          <el-form-item class="login-animation1 gap-bottom" prop="userName">
            <span class="title-text">{{ $t('LG.baseModel.username') }}</span>
            <el-input type="text" :placeholder="$t('LG.baseModel.pleaseEnterYourEmailAccount')" v-model.trim="state.ruleForm.userName" clearable autocomplete="off">
              <!-- <template v-slot:prefix>
                <img :src="userIcon" alt="" />
              </template> -->
            </el-input>
          </el-form-item>
          <el-form-item class="login-animation2 gap-bottom" prop="password">
            <span class="title-text">{{ $t('LG.baseModel.password') }}</span>
            <el-input :type="state.isShowPassword ? 'text' : 'password'" show-password :placeholder="$t('LG.baseModel.pleaseEnterYourPassword')" v-model.trim="state.ruleForm.password" autocomplete="off">
              <!-- <template v-slot:prefix>
                <img :src="passwordIcon" alt="" />
              </template> -->
            </el-input>
          </el-form-item>
          <el-form-item class="login-animation2 gap-bottom">
            <el-col :span="14">
              <el-checkbox v-model="state.isRememberAccount" size="small">
                {{ $t('LG.baseModel.rememberPassword') }}
              </el-checkbox>
            </el-col>
          </el-form-item>
          <el-form-item class="login-animation4">
            <el-button type="primary" class="login-content-submit" @click="loginHandle()" :loading="state.loading.signIn">
              <span>{{ $t('LG.baseModel.login') }}</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="loginView-floor LG-w100 LG-flexCen">v{{ versionTime }}{{ version }}</div>
  </div>
</template>
<script setup lang="ts">
  // import userIcon from '@/assets/loginImg/usericon.png'
  // import passwordIcon from '@/assets/loginImg/passwordicon.png'
  import { ref, reactive, onMounted } from 'vue'
  import dayjs from 'dayjs'
  import { timeDefaultParam } from '@/config/parameter/timeParam.ts'
  import { useRouter } from 'vue-router'
  import { userInfo } from '@/store/userInfo.ts'
  import { msgError, msgSuccess } from '@/units/messageUnits.ts'
  import { useI18n } from 'vue-i18n'
  import { layoutInfo } from '@/store/layoutInfo.ts'
  import { type ELangType } from '@/lang/types.ts'
  import { langTypeList } from '@/lang/constants.ts'
  import SvgIcon from '@/components/svgIcon/svgIcon.vue'
  import type { FormInstance } from 'element-plus'
  import { Local } from '@/store/storage'

  const router = useRouter()
  const userInfoStore = userInfo()
  const { t } = useI18n()
  const storeLayoutInfo = layoutInfo()

  // 版本和时间
  const versionTime = ref<string>(dayjs().format(`${timeDefaultParam.ym}.`))
  const version = ref<string>(__APP_VERSION__)

  // 登录
  const formRef = ref<FormInstance>()
  const status = reactive({
    userName: false,
    password: false,
  })
  const state = reactive({
    isShowPassword: false,
    isRememberAccount: false,
    ruleForm: {
      userName: '',
      password: '',
    },
    rules: {
      userName: [
        {
          validator: (rule: any, value: string, callback: any) => {
            if (!value) {
              status.userName = false
              callback(new Error(t('LG.baseModel.pleaseEnterEmailAccount')))
            }
            if (!/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(value)) {
              status.userName = false
              callback(new Error(t('LG.baseModel.pleaseEnterCorrectEmailAccount')))
            } else {
              status.userName = true
              callback()
            }
          },
          trigger: 'change',
        },
      ],
      password: [
        {
          validator: (rule: any, value: string, callback: any) => {
            if (!value) {
              status.password = false
              callback(new Error(t('LG.baseModel.pleaseEnterPassword')))
            } else {
              status.password = true
              callback()
            }
          },
          trigger: 'change',
        },
      ],
    },
    loading: {
      signIn: false,
    },
  })
  const loginHandle = async (): Promise<void> => {
    await formRef.value?.validate((val: any) => {
      return val
    })
    state.loading.signIn = true
    // 判断是否记住登录名
    if (state.isRememberAccount) {
      const data = { userName: state.ruleForm.userName, password: state.ruleForm.password }
      const dataObj = JSON.stringify(data)
      Local.set('LG_USER_REMEMBER_INFO', dataObj)
    } else {
      Local.remove('LG_USER_REMEMBER_INFO')
    }

    const accountData = { account: state.ruleForm.userName, pwd: state.ruleForm.password, rememberMe: state.isRememberAccount }
    const dataLogin = await userInfoStore.loginUser(accountData)
    if (dataLogin) {
      msgSuccess(t('LG.baseModel.loginSuccess'))
      state.loading.signIn = false
      void router.replace('/root')
    } else {
      msgError(t('LG.baseModel.loginError'))
      state.loading.signIn = false
    }
  }

  // 切换语言
  const switchLang = (type: ELangType): void => {
    storeLayoutInfo.setLocaleConfig(type)
  }

  onMounted(() => {
    const rememberData = Local.get('LG_USER_REMEMBER_INFO')
    if (rememberData) {
      const infoData = JSON.parse(rememberData)
      state.ruleForm.userName = infoData.userName
      state.ruleForm.password = infoData.password
      state.isRememberAccount = true
    } else {
      state.isRememberAccount = false
    }
  })
</script>
<style scoped lang="scss">
  .loginView {
    background-image: url('@/assets/loginImg/loginBgImg.png');
    position: relative;
    .loginView-head {
      position: absolute;
      top: 0;
      right: 0;
      height: 50px;
      align-items: center;
      z-index: 2;
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 0 25px;
      .loginView-logo {
        width: 170px;
        height: 32px;
        img {
          width: 100%;
          height: auto;
        }
      }

      .loginView-lang {
        display: flex;
        align-items: center;
        .langinfo {
          font-size: 25px;
        }
      }
    }
    .loginView-box {
      position: absolute;
      transform: translateY(-50%);
      right: 10%;
      top: 50%;
      z-index: 2;
      width: 400px;
      height: 400px;
      .box {
        padding: 24px;
        .title {
          font-size: 16px;
          font-weight: bold;
          color: #fff;
          text-align: center;
          padding-bottom: 20px;
        }
        .login-content-form {
          margin-top: 20px;
          padding: 0 10px;
          // 修改input样式
          ::v-deep(.el-input) {
            --el-input-text-color: #ffffff;
            --el-input-bg-color: rgba(36, 84, 239, 0.22);
            --el-input-border-color: rgba(36, 84, 239, 0.22);
            --el-input-hover-border-color: rgba(36, 84, 239, 0.22);
            --el-input-focus-border-color: rgba(36, 84, 239, 0.22);
          }
          ::v-deep(.el-form-item.is-error .el-input__wrapper) {
            box-shadow: none;
            margin-bottom: 4px;
          }
          ::v-deep(.el-input__clear) {
            position: absolute;
            z-index: 999;
          }
          ::v-deep(.el-checkbox__input + .el-checkbox__label) {
            color: #fff !important;
          }
          ::v-deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
            color: #409eff !important;
          }
          @for $i from 1 through 4 {
            .login-animation#{$i} {
              opacity: 1;
              animation-name: error-num;
              animation-duration: 0.5s;
              animation-fill-mode: forwards;
              animation-delay: calc($i/10) + s;
            }
          }
          .title-text {
            font-size: 14px;
            font-weight: 400;
            color: #ffffff;
            line-height: 30px;
          }
          .gap-bottom {
            margin-bottom: 20px;
            font-size: 12px;
          }
          .login-content-submit {
            width: 100%;
            letter-spacing: 1px;
            font-weight: 300;
            background: linear-gradient(90deg, #4270f5 0%, #1d4eed 100%);
            border-radius: 3px;
            border: none !important;
            &:hover {
              opacity: 0.9;
            }
          }
        }
      }
    }
    .loginView-floor {
      // background-color: white;
      height: 40px;
      position: absolute;
      font-size: 13px;
      bottom: 0;
      left: 0;
      z-index: 2;
      color: #7689be;
    }
  }
</style>
